<template>
    <div class="courseDetails">
      <div class="header">
        <i class="iconfont icon-zyojiantou" @click="comeBack"></i>
        课程详情
      </div>
      <div class="contentOne">
        <div class="detaisOne">
          <h1><i class="iconfont icon-xingxing1"></i> 基本信息</h1>
          <div class="jibenxinxi">
            <p><label>区<span class="widthnbsp"></span>域：</label> <span class="detailsmessage">{{content.area}}</span></p>
           <!-- <p><label>班级代码：</label> <span class="detailsmessage">{{content.classNo}}</span></p>-->
            <p><label>状<span class="widthnbsp"></span>态：</label> <span class="detailsmessage zhuangtai">{{content.frontStatusName}}</span></p>
            <p><label>学<span class="widthnbsp"></span>年：</label> <span class="detailsmessage">{{content.year}}</span></p>
            <p><label>学<span class="widthnbsp"></span>期：</label> <span class="detailsmessage">{{content.term}}</span></p>
            <p><label>专<span class="widthnbsp"></span>业：</label> <span class="detailsmessage">{{content.spelName}}</span></p>
            <p><label>班<span class="widthnbsp"></span>级：</label> <span class="detailsmessage">{{content.name}}</span></p>
           <!-- <p><label>专业程度：</label> <span class="detailsmessage">{{content.degree}}</span></p>-->
            <p><label>报名限制：</label> <span class="detailsmessage">{{content.applyLimit}}</span></p>
          </div>
        </div>
      </div>
      <div class="contentOne">
        <div class="detaisOne">
          <h1><i class="iconfont icon-xingxing1"></i> 上课时间及地点</h1>
          <div class="jibenxinxi">
            <p><label>上课时间：</label> <span class="detailsmessage">{{content.classDate}}</span></p>
            <p><label>上课地点：</label> <span class="detailsmessage">{{content.timeable}}</span></p>
          </div>
        </div>
      </div>
      <div class="contentOne">
        <div class="detaisOne">
          <h1><i class="iconfont icon-xingxing1"></i> 课程费用</h1>
          <div class="jibenxinxi">
            <p><label>课<span class="widthnbsp"></span>次：</label> <span class="detailsmessage">{{content.times}}</span></p>
            <!--<p><label>明<span class="widthnbsp"></span>细：</label> <span class="detailsmessage redMessage">{{content.classFee}}</span></p>-->
            <p><label>学<span class="widthnbspthree"></span><span class="widthnbspthree"></span>费：</label> <span class="detailsmessage redMessage">{{content.totalFees}}</span></p>
          </div>
        </div>
      </div>
      <div class="contentOne">
        <div class="detaisOne">
          <h1><i class="iconfont icon-xingxing1"></i> 班级描述</h1>
          <div class="jibenxinxi">
            <p v-html="content.descript"></p>
          </div>
        </div>
      </div>
      <div class="agreeBtn"><i @click="agreeUp($event)" class="iconfont icon-yuanxingxuanzhongfill"></i> <router-link to="/agreement">同意并接受 <span style="color: #2f82ff;">《<span style="text-decoration: underline">少年宫报名协议</span>》</span></router-link></div>
      <div class="signUp">
        <div @click="goSignUp" v-show="content.applyable == true" :class="signClass">报名</div>
        <div v-show="content.applyable == false" class="signUpNotBtn">结束</div>
      </div>
      <div class="confirma">
        <confirm v-model="show"
                 title="操作提示"
                 @on-cancel="onCancel"
                 @on-confirm="onConfirm">
          <p style="text-align:center;">您目前尚未登录，是否进行登录？</p>
        </confirm>
      </div>
    </div>
</template>

<style lang="scss" src='./courseDetails.scss'></style>
<script src="./courseDetails.js"></script>
